<template>
    <div class="punchCard">
        <div class="top clearfix" v-if="lock">
            <span class="rest" @click="lock=false">我要修改</span>
            <icon type="info-circle"></icon>
            信息已填写
        </div>
        <div class="head">
            <h1>每日健康打卡</h1>
            <div>按照哈尔滨市疫情防控指挥部要求,您需要每日健康打卡,请您如实登记您当前的健康信息。</div>
        </div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="1.5rem" :show-message="false"
                 :label-position="'top'" class="form">
            <el-form-item label="当前健康状态" prop="healthStatus">
                <group class="form-group">
                    <checklist :options="healthList" v-model="ruleForm.healthStatus" class="checklist"
                               :max="1" :disabled="lock"></checklist>
                </group>
            </el-form-item>
            <el-form-item :label="timeBefore() + '是否有接触过来自湖北、温州、黄岩、温岭的人员'" prop="healthTouchSuspect">
                <group class="form-group">
                    <checklist :options="whetherList" v-model="ruleForm.healthTouchSuspect" class="checklist"
                               :max="1" :disabled="lock"></checklist>
                </group>
            </el-form-item>
            <el-form-item :label="timeBefore() + '是否有接触过疑似或确诊的新型冠状病毒感染的肺炎患者或密切接触者'" prop="healthTouchInfect">
                <group class="form-group">
                    <checklist :options="whetherList" v-model="ruleForm.healthTouchInfect" class="checklist"
                               :max="1" :disabled="lock"></checklist>
                </group>
            </el-form-item>
            <el-form-item :label="timeBefore() + '所居住的楼道是否有确诊的新型冠状病毒感染的肺炎患者或密切接触者'" prop="healthNearInfect">
                <group class="form-group">
                    <checklist :options="whetherList" v-model="ruleForm.healthNearInfect" class="checklist"
                               :max="1" :disabled="lock"></checklist>
                </group>
            </el-form-item>
        </el-form>
        <el-button type="primary" class="submit" @click="submitForm('ruleForm')" :disabled="lock">提交</el-button>
    </div>
</template>

<script>
    import {Checklist, Group, Icon} from 'vux'

    export default {
        data() {
            return {
                ruleForm: {
                    clockDate: '', // 打卡日期
                    healthNearInfect: [], // 是否邻近确诊病人
                    healthTouchInfect: [], // 是否有接触
                    healthStatus: [], // 健康状况
                    healthTouchSuspect: [] // 健康状况
                },
                lock: false, // 打卡锁定,表示今日已打过卡
                rules: {
                    healthNearInfect: [
                        {required: true, message: '', trigger: 'change'}
                    ],
                    healthTouchInfect: [
                        {required: true, message: '', trigger: 'change'}
                    ],
                    healthStatus: [
                        {required: true, message: '', trigger: 'change'}
                    ],
                    healthTouchSuspect: [
                        {required: true, message: '', trigger: 'change'}
                    ]
                },
                whetherList: [
                    {key: '是', value: '是'},
                    {key: '否', value: '否'}
                ],
                healthList: [
                    {key: '健康', value: '健康'},
                    {key: '有发烧、咳嗽、乏力、肌肉酸痛、呼吸急促、腹泻等症状', value: '有发烧、咳嗽、乏力、肌肉酸痛、呼吸急促、腹泻等症状'},
                    {key: '其他', value: '其他'}
                ]
            }
        },
        mounted() {
            this.getHistory()
        },
        methods: {
            validate(formName, callback) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        this.$vux.toast.text('请填写完整信息', 'middle')
                        return false
                    }
                })
            },
            submitForm(formName) {
                this.validate('ruleForm', () => {
                    this.$http.post('/healthClockIn/clockIn', {
                        clockDate: this.$filter.timeFormat((new Date()), 'YYYY-MM-DD'), // 打卡日期
                        healthNearInfect: this.ruleForm.healthNearInfect[0], // 是否邻近确诊病人
                        healthTouchInfect: this.ruleForm.healthTouchInfect[0], // 是否有接触
                        healthStatus: this.ruleForm.healthStatus[0], // 健康状况
                        healthTouchSuspect: this.ruleForm.healthTouchSuspect[0] // 健康状况
                    }).then(result => {
                        if (result.success) {
                            this.$vux.alert.show({
                                content: '健康打卡成功',
                                onShow() {
                                },
                                onHide() {
                                    history.back()
                                }
                            })
                        }
                    })
                })
            },
            timeBefore() {
                let date = new Date()
                date -= 3600 * 24 * 14 * 1000
                return this.$filter.timeFormat(date, 'MM.DD') + '至今'
            },
            getHistory() {
                this.$vux.loading.show()
                this.$http.get('/healthClockIn/lastClockIn').then(result => {
                    if (result.success && result.data) {
                        if (result.data.clockDate === this.$filter.timeFormat((new Date()), 'YYYY-MM-DD')) this.lock = true
                        let obj = {
                            healthNearInfect: [result.data.healthNearInfect], // 是否邻近确诊病人
                            healthTouchInfect: [result.data.healthTouchInfect], // 是否有接触
                            healthStatus: [result.data.healthStatus], // 健康状况
                            healthTouchSuspect: [result.data.healthTouchSuspect] // 健康状况
                        }
                        this.ruleForm = {...this.ruleForm, ...obj}
                    }
                    this.$vux.loading.hide()
                }).catch(() => {
                    this.$vux.loading.hide()
                })
            }
        },
        components: {
            Checklist,
            Group,
            Icon
        }
    }
</script>

<style scoped lang="less">
    .punchCard {
        background-color: #f4f4f4;
        height: 100%;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        padding-bottom: .26rem;

        /deep/ .top {
            padding: .15rem .2rem;
            background-color: #E9F1FC;
            color: #409EFF;
            line-height: .44rem;

            .weui-icon-info-circle {
                font-size: .32rem;
                color: #409EFF;

                &:before {
                    margin-right: 0;
                }
            }

            .rest {
                float: right;
                padding: 0 .15rem;
                border: 1px solid #409EFF;
                border-radius: .2rem;
            }
        }

        .head {
            background-color: #fff;
            padding: .2rem;
            color: #666;

            h1 {
                font-size: .36rem;
                border-bottom: 1px solid #eee;
                margin-bottom: .1rem;
                color: #333;
            }
        }
    }

    .form {
        /deep/ .el-form-item {
            font-size: .28rem;
            background-color: #fff;
            margin-bottom: .15rem;
            padding: .1rem 0;

            .el-form-item__label {
                color: #333;
                padding: 0 0 0 .2rem;
                font-size: .28rem;
                line-height: .48rem;
                margin-bottom: .1rem;
            }

            .el-form-item__content {
                font-size: .28rem;
                line-height: .5rem;
            }

            .selector {
                padding: .1rem .2rem;
                line-height: .48rem;

                .weui-select {
                    padding-left: 0;
                    height: .48rem;
                    line-height: .48rem;
                    font-size: .28rem;
                }
            }

            .weui-cells_checkbox {
                .weui-icon-checked {
                    &:before {
                        font-size: .34rem;
                    }
                }

                .weui-check:checked + .vux-checklist-icon-checked {
                    &:before {
                        color: #409EFF;
                    }
                }
            }

            .el-button {
                font-size: .28rem;
            }

            .form-group {
                .weui-cells {
                    &:before, &:after {
                        border: 0 none;
                    }

                    margin-top: 0;
                    font-size: .28rem;

                    .weui-cell {
                        padding: .15rem .2rem;

                        &:before {
                            border: 0 none;
                        }
                    }

                    .vux-cell-value {
                        color: inherit;
                    }
                }
            }

            &.form-item-top {
                margin-top: -.2rem;
                border-top: 1px solid #eee;
            }
        }
    }

    .submit {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: .88rem;
        z-index: 5;
    }
</style>
